<template>
  <view class="input-container" :class="{ focused: isFocused }">
    <!-- 图标区域 -->
    <view class="icon" v-if="icon || iconType">
      <!-- 图片图标 -->
      <image v-if="icon" :src="icon" class="icon-image" />
      <!-- uni-icons 图标 -->
      <uni-icons
        v-if="iconType"
        :type="iconType"
        :size="iconSize"
        :color="iconColor"
      />
    </view>

    <uni-easyinput
      class="input"
      :type="type"
      :value="currentValue"
      :placeholder="placeholder"
      :placeholder-style="placeholderStyle"
      @input="onInput"
      @focus="onFocus"
      @blur="onBlur"
      :clearable="clearable"
      :password-icon="showPasswordIcon"
      @iconClick="onIconClick"
    />

    <slot name="right"></slot>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  // 支持 v-model
  modelValue: {
    type: String,
    default: "",
  },
  // 兼容旧的 value 写法
  value: {
    type: String,
    default: "",
  },
  clearable: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: "请输入",
  },
  placeholderStyle: {
    type: String,
    default:
      "color: #C3C5CA; font-size: 28rpx; font-family: 苹方-简 常规体; line-height: 40rpx; padding: 4rpx 0;",
  },
  // 图片图标
  icon: {
    type: String,
    default: "",
  },
  // uni-icons 图标
  iconType: {
    type: String,
    default: "",
  },
  iconSize: {
    type: [String, Number],
    default: 18,
  },
  iconColor: {
    type: String,
    default: "#ff8c00",
  },
  type: {
    type: String,
    default: "text",
  },
  showPasswordIcon: {
    type: Boolean,
    default: false,
  },
  // 聚焦时右侧图标颜色
  focusIconColor: {
    type: String,
    default: "#ff9714",
  },
});

const emit = defineEmits([
  "update:modelValue",
  "input",
  "iconClick",
  "focus",
  "blur",
]);

// 聚焦状态
const isFocused = ref(false);

// 获取当前值（优先使用 modelValue，兼容 value）
const currentValue = computed(() => props.modelValue || props.value);

const onInput = (e) => {
  const value = e.detail ? e.detail.value : e;
  console.log("Input value:", value);
  // 同时发射两个事件，兼容新旧写法
  emit("update:modelValue", value); // v-model 需要
  emit("input", value); // 兼容旧的 @input
};

const onFocus = (e) => {
  isFocused.value = true;
  emit("focus", e);
};

const onBlur = (e) => {
  isFocused.value = false;
  emit("blur", e);
};

const onIconClick = () => {
  emit("iconClick");
};
</script>

<style lang="scss" scoped>
.input-container {
  width: 100%;
  background-color: #f8f9fa;
  padding: 0 30rpx;
  border-radius: 24rpx;
  box-sizing: border-box;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 20rpx;
  border: 2rpx solid transparent;
  transition: border-color 0.3s ease;

  &.focused {
    border-color: v-bind("focusIconColor");
  }

  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    .icon-image {
      width: 36rpx;
      height: 36rpx;
    }
  }

  .input {
    flex: 1;
    border-radius: 20rpx;
    background-color: transparent;
    font-size: 30rpx;
  }
}

// 覆盖 uni-easyinput 的默认样式
:deep(.uni-easyinput) {
  background: transparent !important;
  border: none !important;

  .uni-easyinput__content {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;

    .uni-easyinput__content-input {
      font-size: 30rpx !important;
      color: #333 !important;
      background: transparent !important;

      &::placeholder {
        color: #999 !important;
        font-size: 28rpx !important;
      }
    }
  }

  .uni-easyinput__content-clear-btn,
  .uni-easyinput__content-input-icon {
    color: v-bind("isFocused ? focusIconColor : iconColor") !important;
    transition: color 0.3s ease;
  }
}
:deep(.is-focused .content-clear-icon) {
  color: v-bind("isFocused ? focusIconColor : iconColor") !important;
  transition: color 0.3s ease;
}
</style>
